<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>下拉列表</title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">
</head>
<body>
<select id="sel" ></select>
<div id="selPanel">
    <div style="color:#99BBE8;background:#fafafa;padding:5px;">请选择一个系统</div>
    <div style="padding:2px">
        <input type="radio" name="lang" value="1"/><span style="cursor: pointer">质量系统</span><br/>
        <input type="radio" name="lang" value="2"/><span style="cursor: pointer">生产系统</span><br/>
        <input type="radio" name="lang" value="3"/><span style="cursor: pointer">物资系统</span><br/>
        <input type="radio" name="lang" value="4"/><span style="cursor: pointer">项目系统</span><br/>
        <input type="radio" name="lang" value="5"/><span style="cursor: pointer">合同系统</span>
    </div>
</div>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script type="text/javascript">
    $(function () {
        $('#sel').uiCombo({
            required: true,
            editable: true,
            width:400,
            panelWidth:400
        });
        $('#selPanel').appendTo($('#sel').uiCombo('panel'));
        $('#selPanel input,#selPanel span').click(function () {
            var value, text;
            var ele=$(this);
            if (ele.is(':input')) {
                value = $(this).val();
                text = $(this).next('span').text();
            }else{
                text = $(this).text();
                value = $(this).prev('input').val();
            }
            $('#sel').uiCombo('setValue', value).uiCombo('setText', text).uiCombo('hidePanel');
        });
    });
</script>
</html>